<template>
  <div class="game">
    <!--搜索结果-->
    <ul  class="top">
      <li @click="doouou()">销量</li>
      <li>最新</li>
      <li>价格</li>
      <li>筛选</li>
    </ul>
    <div class="content">
      <div class="kouhon" v-for="clg in oust">
        <img :src= clg.img alt="">
        <div class="tc">
          <router-link :to="{name: 'product', params: {productImg: clg.img, productPrice: 10, isPrice: clg.price, isTxt: clg.name}}">
            <p>{{clg.name}}</p>
          <p>焕彩璀璨花蕊唇彩4.8g焕彩璀璨花蕊唇彩4.8g焕彩璀璨花蕊唇彩4.8g</p>
          <img src="../../../assets/two/japan.jpg" alt="">
          <img src="../../../assets/two/feiji.jpg" alt="">
          <p>海外直邮</p>
          <p>{{clg.price}}</p>
          </router-link>
        </div>
        <div class="btn"></div>
      </div>
    </div>
    <img src="../../../assets/two/datu.jpg" alt="" class="da">
  </div>
</template>
<script>
  import Facial from '../../../components/classif/Face/Facial.vue'
  export default {
    data(){
      return{
        isBunt: '',
//        搜索结果
        aStus:[]
      }
    },
    methods: {
      doClick() {
        this.$router.go(-1);
      },
      doDinj() {
        if (this.isBunt != '') {
          this.arStu.push(this.docus);
          console.log(123,this.arStu);
          this.$router.push({name: 'home/sousuo/success'});
        }
      },
      doouou() {
        console.log(123);
      }
    },
    props: {
      oust: {
        type: Array,
        // 设置对象默认值时
//        default: function () {
//          return {
//            name: 'feihong',
//            age: 20
//          }
//        }
      }
    }
  }
</script>
<style scoped>
  .top{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    height: 2.5rem;
    padding-top: 0.5rem;
    font-size: 1.3rem;
    background: white;
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #ccc;
    background: rgb(242,242,242);
  }
  .top li{
    color: gray;
  }
  .content{
    margin-bottom: 1rem;
  }
  .btn{
    height: 1rem;
    background: rgb(242,242,242);
  }
  .kouhon {
    overflow: hidden;
  }
  .kouhon img{
    width: 3.75rem;
    height: 7.62rem;
    margin: 1rem 3rem 1rem 3rem;
    float: left;
  }

  .tc{
    overflow: hidden;
  }
  .tc p{
    float: left;
  }
  .tc p:nth-child(1){
    font-size: 1.5rem;
    margin: 0.6rem;
    margin-left: 0;
    color: #808080;
  }
  .tc p:nth-child(2){
    color: #a9a9a9;
    font-size: 1.2rem;
  }
  .tc p:nth-child(5){
    color: #a9a9a9;
    font-size: 1.2rem;
    margin-top: 0.6rem;
  }
  .tc p:nth-child(6){
    color: #ff4500;
    font-size: 1.5rem;
    margin-top: 0.5rem;
    float: right;
    margin-right: 1rem;
  }
  .tc img{
    height: 1.5rem;
    width: 2rem;
    margin:0.6rem;
    margin-left: 0;
  }
  .da{
    width:100%;
  }
</style>
